<!DOCTYPE html>                                                                                          
<html lang="en">
<head>   
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover">
  <meta name="referrer" content="origin-when-cross-origin">
  <title>{%- block head_title -%}Bluesky{%- endblock -%}</title>

  <!-- Hello Humans! API docs at https://atproto.com -->
  
  <style>
    /**
     * Extend the react-native-web reset:
     * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
     */
    html,
    body,
    #root {
      width: 100%;
      /* To smooth any scrolling behavior */
      -webkit-overflow-scrolling: touch;
      margin: 0px;
      padding: 0px;
      /* Allows content to fill the viewport and go beyond the bottom */
      min-height: 100%;
    }
    #root {
      flex-shrink: 0;
      flex-basis: auto;
      flex-grow: 1;
      display: flex;
      flex: 1;
    }

    html {
      scroll-behavior: smooth;
      /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
      -webkit-text-size-adjust: 100%;
      height: calc(100% + env(safe-area-inset-top));
    }

    /* Color theming */
    :root {
      --text: black;
      --background: white;
      --backgroundLight: #F3F3F8;
    }
    html.colorMode--dark {
      --text: white;
      --background: black;
      --backgroundLight: #26272D;
    }
    @media (prefers-color-scheme: light) {
      html.colorMode--system {
        --text: black;
        --background: white;
        --backgroundLight: #F3F3F8;
      }
    }
    @media (prefers-color-scheme: dark) {
      html.colorMode--system {
        --text: white;
        --background: black;
        --backgroundLight: #26272D;
      }
    }

    body {
      display: flex;
      /* Allows you to scroll below the viewport; default value is visible */
      overflow-y: auto;
      overscroll-behavior-y: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -ms-overflow-style: scrollbar;
    }

    /* Remove default link styling */
    a {
      color: inherit;
    }
    a[role="link"]:hover {
      text-decoration: underline;
    }
    a[role="link"][data-no-underline="1"]:hover {
      text-decoration: none;
    }

    /* Styling hacks */
    *[data-word-wrap] {
      word-break: break-word;
    }

    /* ProseMirror */
    .ProseMirror {
      font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      min-height: 140px;
    }
    .ProseMirror-dark {
      color: white;
    }
    .ProseMirror p {
      margin: 0;
    }
    .ProseMirror p.is-editor-empty:first-child::before {
      color: #8d8e96;
      content: attr(data-placeholder);
      float: left;
      height: 0;
      pointer-events: none;
    }
    .ProseMirror .mention {
      color: #0085ff;
    }
    .ProseMirror a {
      color: #0085ff;
      cursor: pointer;
    }
    /* OLLIE: TODO -- this is not accessible */
    /* Remove focus state on inputs */
    .ProseMirror-focused {
      outline: 0;
    }
    textarea:focus,
    input:focus {
      outline: 0;
    }
    .tippy-content .items {
      width: fit-content;
    }

    /* Tooltips */
    [data-tooltip] {
      position: relative;
      z-index: 10;
    }
    [data-tooltip]::after {
      content: attr(data-tooltip);
      display: none;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateY(100%) translateY(8px) translateX(-50%);
      padding: 4px 10px;
      border-radius: 10px;
      background: var(--backgroundLight);
      color: var(--text);
      text-align: center;
      white-space: nowrap;
      font-size: 12px;
      z-index: 10;
    }
    [data-tooltip]::before {
      content: '';
      display: none;
      position: absolute;
      border-bottom: 6px solid var(--backgroundLight);
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      bottom: 0;
      left: 50%;
      transform: translateY(100%) translateY(2px) translateX(-50%);
      z-index: 10;
    }
    [data-tooltip]:hover::after,
    [data-tooltip]:hover::before {
      display:block;
    }
  </style>
  {% include "scripts.html" %}
  <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
  {% block html_head_extra -%}{%- endblock %}
  <meta name="application-name" name="Bluesky">
  <meta name="generator" name="bskyweb">
</head>
<body>
{%- block body_all %}
	<div id="root"></div>
    <noscript>
      <h1>JavaScript Required</h1>
      <p>This is a heavily interactive web application, and JavaScript is required. Simple HTML interfaces are possible, but that is not what this is.
      <p>Learn more about Bluesky at <a href="https://blueskyweb.xyz">blueskyweb.xyz</a> and <a href="https://atproto.com">atproto.com</a>.
			{% block noscript_extra %}{% endblock %}
    </noscript>
{% endblock -%}
</body>
</html>
